import * as React from 'react'
import { useEffect} from 'react';
import { 
    Table,
    Tag,
    Space,
    Row,
    Col,
    Button
} from 'antd';
import { getUserList } from '../../store/actions';
import './style.scss'
import { useAppDispatch,useAppSelector } from '../../hooks';
import { fetchUserStatus } from '../../api';
export default ()=>{
    const columns = [
        {
            title: 'ID',
            dataIndex: '_id',
            key: 'name',
            align:'center',
            // render: text => <a>{text}</a>,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
            align: 'center',
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
        },{
            title: '操作',
            key: 'action',
            align: 'center',
            render: (text, row,index) => (
                <Space size="middle">
                        {
                        row.status?
                            <a onClick={() => changeStatue(row._id, 'ban', index)}>禁用</a> : <a onClick={() => changeStatue(row._id, 'start', index)}>启用</a>
                        }
                </Space>
            ),
        },
    ]
    const dispatch = useAppDispatch()
    let data = useAppSelector(store => store.user.userList)
    let total = useAppSelector(store => store.user.total)
    useEffect(()=>{
        dispatch(getUserList())
        return undefined
    },[])
    console.log(data);
    const changeStatue=(id,type,index)=>{
        console.log(id);
        console.log(data[index].status);
        
        var status=data[index].status
        type == 'ban' ? status = 0 : status = 1
        fetchUserStatus({status,id})
        //更新列表
        dispatch(getUserList())
    }

    return(
        <div className='qf-userlist'>
            <div className='qf-filter'>
                <Row>
                    <Col span={12}>
                        <Button size='small' type="primary"
                        >添加用户
                        </Button></Col>
                </Row>
            </div>
            <div className='qf-table'>
                <Table 
                    rowKey='_id'
                    columns={columns} dataSource={data}
                    showSizeChanger
                    pagination={{
                        total,
                        pageSize:2
                    }}
                    showTotal={t=>(<div>总共有{t}页</div>)}
                    pageSizeOptions={['2','10','15','20']} 
                /></div>
            <div></div>
        </div>
    )
}